<template>
  <div id="Room-type">
    <div class="address">
        <h3>宾馆管理 > 房型</h3>
      </div>
    <!-- 功能栏 -->
    <div class="function">
      <el-input placeholder="请输入内容"></el-input>
      <el-button class="sousuo" type="primary"><span>搜索</span></el-button>
      <div class="one-bt" style="height:2rem">
        <el-button type="success" icon="el-icon-plus"  @click="addRoomType" :disabled="!isAddOn" circle>
          <div class="float-block"><span>添加</span></div>
        </el-button>
      </div>
    </div>
    
    <!-- 展示框 -->
    <div class="show-Room-Type"> 
        <el-table
          class="room-type-table TABLEMINWIDH"
          ref="multipleTable"
          :data="roomTypes"
          tooltip-effect="dark"
          style="width: 100%;font-size: 1.5rem;"
          @selection-change="handleSelectionChange">
          <!-- 选择框 -->
          <el-table-column
            type="selection"
            style="width:10%">
          </el-table-column>
          <!-- 预览 -->
          <el-table-column
            label="预览"
            header-align="center"
            align="center"
            style="width:30%">
            <template slot-scope="scope">
              <img class="room-type-img" :src="scope.row.imgUrl">
            </template>
          </el-table-column>
          <!-- 房型 -->
          <el-table-column
            label="房型"
            header-align="center"
            align="center"
            style="width:20%">
            <template slot-scope="scope">
              <el-input v-model="scope.row.title" v-if="scope.row.isEdit"></el-input>
              <span v-else>{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <!-- 价格 -->
          <el-table-column
            prop="price"
            label="价格"
            header-align="center"
            align="center"
            style="width:20%">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price" v-if="scope.row.isEdit"></el-input>
              <span v-else>{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <!-- 备注 -->
          <el-table-column
            label="配置"
            header-align="center"
            align="center"
            style="width:20%"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input class="input" type="textarea" :rows="3"  v-model="scope.row.facility" v-if="scope.row.isEdit"></el-input>
              <span v-else class="peizhi">{{scope.row.facility}}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            :class="[]"
            prop="facility"
            header-align="center"
            align="center"
            style="width:20%">
            <template slot-scope="scope">
              <div v-if="scope.$index === editingData">
                <div class="one-bt">
                  <el-button type="primary" icon="el-icon-edit" circle @click="editRoomType(scope.row)" :disabled="scope.row.isEdit">
                    <div class="float-block"><span>编辑</span></div>
                  </el-button>
                </div>
                <div class="one-bt">
                  <el-button type="danger" icon="el-icon-delete" circle @click="deleteRoomType(scope.$index)">
                    <div class="float-block"><span>删除</span></div>
                  </el-button>
                </div>
                <div class="one-bt">
                  <el-button type="warning" icon="el-icon-notebook-2" circle @click="saveRoomType(scope.row)" :disabled="!scope.row.isEdit">
                    <div class="float-block"><span>保存</span></div>
                  </el-button>
                </div>
              </div>
              <i class="el-icon-more" @click="changeStatus(scope.row,scope.$index)" v-else></i>
            </template>
          </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
import { addOneRoomType, modifyOneRoomType, deleteOneRoomType } from '@/api/api'
import { showMessage } from '@/utils/utils'
import { roomTypeMixin } from '@/utils/mixins/roomType'
import { loadingMixin } from '@/utils/mixins/loading'
import { mapGetters, mapActions, mapState } from "vuex";
export default {
  mixins: [roomTypeMixin, loadingMixin],
  name:"Room-type",
  data() {
    return {
      // 确认删除
      toDelete: false,

      // 进入编辑状态
      editingData:-1,

      // 现在操作的是否是新增的
      isEditNew: false, 

      //按钮可用？，true可以
      isEditOn: false,
      isDeleteOn: false,
      isSaveOn: true,

      imgUrl:"@/assets/images/单人大床房.webp",
      multipleSelection: [],
      // roomTypes:[],
    }
  },
  computed:{
    isAddOn: function() {
      return !this.isEditOn
    }
  },
  watch:{
    // 监听是否有选中值
    multipleSelection:function() {
      if(this.multipleSelection.length > 0) this.isEditOn = true, this.isDeleteOn = true
      else this.isEditOn = false, this.isDeleteOn = false
    },
  },
  methods: {
    // 改变编辑状态
    changeStatus(item, id) {
      this.editingData = id
    },
    // 选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑房型
    editRoomType(item) {
      item.isEdit = true
    },
    // 删除房型
    deleteRoomType(index) {
      // 如果不是新增的 删除数据库数据
      if(!this.isEditNew) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', 'tips', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteOneRoomType(this.roomTypes[index].tin)
        }).then(response => {
          showMessage(this, '删除成功', 'success')
          this.roomTypes.splice(index, 1)
        }).catch(error => {
          showMessage(this, '删除失败', 'error')
        })
      }else{
        this.roomTypes.splice(index, 1)
      }
      this.isEditNew = false
    },
    // 增加房型
    addRoomType() {
      let maxTin = 0
      for(let o of this.roomTypes) {
        if(maxTin < o.tin) maxTin = o.tin
      }
      let addType = {tin: maxTin + 1, isEdit: true, imgUrl:require("@/assets/images/单人大床房.webp"), title: "", price: 0, facility: ""}
      this.roomTypes.splice(0, 0, addType)
      this.editingData = 0
      this.isEditNew = true
    },
    //保存房型 上传到数据库
    saveRoomType(item) {
      //检查房型名是否已有
      for (let element of this.roomTypes) {
        if(element.title === item.title && element.tin !== item.tin) {
          showMessage(this,"房型“" + item.title + '”已经注册!', 'warning')
          return
        }
      }

      // 新增的数据 插入
      if(this.isEditNew) {
        addOneRoomType({
          'facility': this.roomTypes[0].facility, 'tin': this.roomTypes[0].tin,
          'title': this.roomTypes[0].title, 'price': this.roomTypes[0].price
        }).then(response => {
          showMessage(this, '保存成功', 'success')
          this.editingData = -1
          item.isEdit = false
          this.isEditNew = false
        }).catch(error => {
          showMessage(this, '保存失败', 'error')
        })
      }
      //不是新增的 修改 
      else {
        modifyOneRoomType(item).then(response => {
          showMessage(this, '保存成功', 'success')
          this.editingData = -1
          item.isEdit = false
          this.isEditNew = false
        }).catch(error => {
          showMessage(this, '保存失败', 'error')
        })
      }
    },
    async load() {
      await this.updateRoomType()
    }
  },
  
}
</script>

<style>
#Room-type .one-bt .el-button [class*=el-icon-]+span {
  margin: 0;
}
#Room-type .el-scrollbar__wrap {
  overflow-x: hidden;
}
#Room-type .cell{
  overflow: visible;
}
#Room-type .el-input__inner{
  height: 3rem;
}
</style>
<style lang="less" scoped>
.address{
  position: relative;
  color: #aa97b0;
  h3{
    font-size: 18.72px;
  }
  top: -20px;
}
//小组件
.one-bt{
  display: inline-block;
  position: relative;
  margin-left: 20px;
  .float-block{
    visibility: hidden;
    width: 100%;
    float: left;
    font-size: 1rem;
    color: #aa97b0;;
    text-align: center;
    position: absolute;
    margin-bottom: 5px;
    top: -20px;
    left: 0px;
    z-index: 13;
  }
  .el-button:hover .float-block{
    visibility: visible;
  }
}
#Room-type{
  font-size: 1.5rem;
  .function{
    height: 5rem;
    // background-color: aqua;
    display: flex;
    align-items: center;
    .el-input{
      width: 400px;
      font-size: 1rem;
    }
    .el-button.sousuo{
      height: 3rem;
      font-size: 1rem;
      margin-right: 20px;
      span{
        display: inline-block;
        position: relative;
        top: 3px;
      }
    }
    .one-bt{
      position: relative;
      top: -5px;
    }
  }
  .show-Room-Type{
    // height: 690px;
    .room-type-table{
      .el-input, .input{
        font-size: 1.5rem;
      }
    }
  }
}
.room-type-img{
  height: 8rem;
}
.peizhi{
  display: inline-block;
  width: 330px;
  white-space: pre-line;
  word-break: break-all;
  word-wrap: break-word;
  line-height: 2rem;
}
</style>